import 'package:beamer_website/presentation/core/paragraph.dart';
import 'package:beamer_website/presentation/introduction/widgets/basic_example.dart';
import 'package:flutter/material.dart';
import 'package:url_launcher/link.dart';

class IntroductionScreen extends StatelessWidget {
  const IntroductionScreen({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    final theme = Theme.of(context);
    return Scaffold(
      body: ListView(
        children: [
          const SizedBox(height: 64.0),
          Center(
            child: Stack(
              children: [
                Padding(
                  padding: const EdgeInsets.all(32),
                  child: Link(
                    uri: Uri.parse('https://pub.dev/packages/beamer'),
                    builder: (context, followLink) => InkWell(
                      hoverColor: Colors.transparent,
                      borderRadius: BorderRadius.circular(8),
                      onTap: followLink,
                      child: Image.network(
                        'https://raw.githubusercontent.com/slovnicki/beamer/master/resources/logo.png',
                      ),
                    ),
                  ),
                ),
                Positioned(
                  top: 0,
                  right: 0,
                  child: Link(
                    uri: Uri.parse(
                        'https://docs.flutter.dev/development/packages-and-plugins/favorites'),
                    builder: (context, followLink) => InkWell(
                      borderRadius: BorderRadius.circular(32),
                      onTap: followLink,
                      child: SizedBox(
                        width: 64.0,
                        height: 64.0,
                        child: Image.network(
                          'https://raw.githubusercontent.com/slovnicki/beamer/master/resources/flutter_favorite_badge.png',
                        ),
                      ),
                    ),
                  ),
                ),
              ],
            ),
          ),
          Padding(
            padding: const EdgeInsets.all(32.0),
            child: Column(
              children: [
                SelectableText(
                  'Welcome to Beamer documentation!',
                  style: theme.textTheme.headlineLarge,
                  textAlign: TextAlign.center,
                ),
                SelectableText(
                  '🎉 ...built with Beamer... 🎉',
                  style: theme.textTheme.titleLarge!.copyWith(
                    fontWeight: FontWeight.bold,
                    color: theme.colorScheme.primary,
                  ),
                  textAlign: TextAlign.center,
                ),
                const SizedBox(height: 48.0),
                SizedBox(
                  width: 800,
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      const ParagraphTitle('Why "Beamer"?'),
                      const ParagraphText(
                        'There was a time, sometime in late 2020, when Beamer was just a routing part of a particular application, serving it pretty well in production. It seemed reasonable to share it on pub.dev, but then a name needed to be coined. I believe it took at least a month to settle on a name. The idea was to have a simple and descriptive name, but this was not so easy as many of the most obvious choices are already taken (Router, Navigator, ...).',
                      ),
                      Center(
                        child: Image.network(
                          '',
                        ),
                      ),
                      const SizedBox(height: 8.0),
                      const ParagraphText(
                        "At the time I was watching the Star Trek series and it just hit me!\nWe're doing a pretty similar thing as teleportation - taking the user to an entirely new stack of pages each time they navigate, as if they are being teleported to that part of the application. A slightly better word than \"teleporter\" is \"beamer\" as it's also kind of similar to the \"router\" - what Beamer really is under the hood (Router widget).",
                      ),
                      Center(
                        child: Image.network(
                            ''),
                      ),
                      const SizedBox(height: 32.0),
                      const ParagraphTitle('What is this documentation about?'),
                      const ParagraphText(
                        'This documentation (still an early stage work in progress) aims to be the in-depth, self-explanatory API documentation for Beamer. One of the main goals is to have a lot of interactive examples like this one, nested within this website:',
                      ),
                    ],
                  ),
                ),
                Padding(
                  padding: const EdgeInsets.all(32.0),
                  child: Container(
                    decoration: BoxDecoration(
                      border: Border.all(color: Colors.blue),
                    ),
                    width: 256.0,
                    height: 420.0,
                    child: const BasicExample(),
                  ),
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }
}
